<script setup>
import {Remove} from '@element-plus/icons-vue'
import {apiAddUserWithMe, apiBkManageList, apiDelUserWithMe, apiWithUserList} from "@/api/banke/designWith";
// import {useStore} from "vuex";
import {computed, unref} from "vue";
import defaultAvatar from '@/assets/images/user-default.jpg'
import {ElMessage, ElMessageBox} from "element-plus";
import {checkPhone} from "@/utils/tools";

const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})

// const store = useStore()
// const userIdGet = computed(() => store.state.user.userId)

const searchValRef = ref('')
const showSearchListRef = ref(false)

const loadingRef = ref(false)
const listRef = ref([])
const adminUserGet = computed(() => {
  const findAdmin = unref(listRef).find(item => item.status === '主管理')
  return findAdmin || {}
})

const updateList = () => {
  apiBkManageList(props.row.id, {
    loadingRef,
    dataRef: listRef
  })
}

const searchUserListRef = ref([])
const onSearchUser = () => {
  if (loadingRef.value) return ElMessage.warning('请勿频繁操作')
  const searchVal = unref(searchValRef).trim()
  if (!checkPhone(searchVal)) return ElMessage.warning('请输入11位手机号')
  searchUserListRef.value = []
  apiWithUserList(searchVal, {loadingRef, dataRef: searchUserListRef})
  showSearchListRef.value = true
}

const onCancelSearch = () => {
  showSearchListRef.value = false
  searchValRef.value = ''
}

const addUserWithMe = ({userId}) => {
  apiAddUserWithMe({
    bkId: props.row.id,
    userId
  }, {loadingRef}).promise.then(() => {
    ElMessage.success('添加成功')
    onCancelSearch()
    updateList()
  })
}

const removeUser = ({userId}) => {
  ElMessageBox.confirm('确认移除该协作者?', '提示', {
    confirmButtonText: '移除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(()=> {
    apiDelUserWithMe({
      bkId: props.row.id,
      userId
    }, {loadingRef}).promise.then(() => {
      ElMessage.success('移除成功')
      updateList()
    })
  })
}

updateList()

</script>

<template>
  <div class="with-me-list">
    <div class="dialog-header-wrap">
      <div class="icon-wrap" @click="onCancelSearch">
        <i v-if="showSearchListRef" class="iconfont icon-arrow-left"></i>
      </div>
      <span class="title">邀请协作</span>
    </div>
    <div class="search-box">
      <el-input v-model.trim="searchValRef" placeholder="请输入被邀请者的手机号，按回车「Enter」搜索"
                @keyup.enter="onSearchUser"></el-input>
      <el-button class="button" type="primary" :disabled="loadingRef" :loading="showSearchListRef && loadingRef"
                 @click="onSearchUser">搜索
      </el-button>
    </div>
    <div class="current-box" v-if="!showSearchListRef">
      <div class="title">
        <i class="iconfont icon icon-Customermanagement-fill"></i>
        <span>项目成员({{ listRef.length }})</span>
      </div>
      <div class="list">
        <div class="item" v-for="item in listRef" :key="item.userId">
          <div class="info">
            <el-avatar class="avatar" :src="item.avatar || defaultAvatar"></el-avatar>
            <div class="text">
              <div class="name">
                {{ item.name }}
                <span v-if="userIdGet === item.userId" class="me">
                （我）
                </span>
              </div>
              <div class="phone">{{ item.phone }}</div>
            </div>
          </div>
          <div class="tag-wrap">
            <div v-if="item.status === '主管理'" class="tag">主管理</div>
            <div v-else class="tag with">协作者</div>
          </div>
          <div class="buttons">
            <el-button class="button" :icon="Remove" type="danger" :loading="loadingRef"
                       :disabled="`${adminUserGet.userId}` === `${item.userId}` || userIdGet !== `${adminUserGet.userId}`" link
                       @click="removeUser(item)"
            >移除
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="search-list" v-else>
      <div class="list">
        <div class="item" v-for="item in searchUserListRef" :key="item.userId">
          <div class="avatar-wrap">
            <el-avatar class="avatar" :src="item.avatar || defaultAvatar"></el-avatar>
            <span>{{ item.name }}</span>
          </div>
          <div class="phone-wrap">
            <div class="phone">{{ item.phone }}</div>
          </div>
          <div class="buttons">
            <el-button class="button" type="primary" link :loading="loadingRef" @click="addUserWithMe(item)">
              <i class="iconfont icon icon-add-account"></i>
              <span>添加</span>
            </el-button>
          </div>
        </div>
      </div>
      <div v-if="searchUserListRef.length < 1" class="no-more">
        系统暂无该成员
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.with-me-list {
  display: flex;
  flex-direction: column;

  .search-box {
    display: flex;
    justify-content: space-between;
    margin: 0 20px 25px;

    .button {
      margin-left: 12px;
    }
  }

  .current-box {
    > .title {
      display: flex;
      align-items: center;
      padding: 12px 0;
      margin: 0 20px 12px;
      font-size: 14px;
      color: rgba(136, 136, 136, 1);
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      box-sizing: border-box;

      .icon {
        margin-right: 4px;
      }
    }

    > .list {
      display: flex;
      flex-direction: column;
      padding: 10px 0;

      > .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;

        &:hover {
          background-color: rgba(100, 100, 100, .1);
        }

        > .info {
          display: flex;
          align-items: center;
          flex: 1;

          .avatar {
            width: 36px;
            height: 36px;
            margin-right: 8px;
          }

          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              font-size: 14px;
              color: rgba(51, 51, 51, 1);

              .me {
                font-size: 14px;
                color: rgba(41, 136, 254, 1);
              }
            }

            .phone {
              font-size: 12px;
              color: rgba(170, 170, 170, 1);
            }
          }
        }

        > .tag-wrap {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .tag {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2px 5px;
            font-size: 12px;
            color: rgba(255, 255, 255, 1);
            border-radius: 3px;
            background-color: rgba(67, 149, 255, 1);
            box-sizing: border-box;
          }

          .with {
            background-color: rgba(231, 241, 255, 1);
            color: rgba(41, 136, 254, 1);
          }
        }

        > .buttons {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .button {
            font-size: 14px;
          }

        }


      }
    }
  }

  .search-list {
    .list {
      display: flex;
      flex-direction: column;
      padding: 10px 0;

      > .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;

        &:hover {
          background-color: rgba(100, 100, 100, .1);
        }

        > .avatar-wrap {
          display: flex;
          align-items: center;
          flex: 1;

          .avatar {
            width: 36px;
            height: 36px;
            margin-right: 8px;
          }
        }

        > .phone-wrap {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .phone {
            font-size: 12px;
            color: rgba(170, 170, 170, 1);
          }
        }

        > .buttons {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .button {
            font-size: 14px;
          }

        }
      }
    }

    .no-more {
      padding: 30px;
      text-align: center;
      font-size: 14px;
      color: rgba(136, 136, 136, 1);
    }
  }
}

.dialog-header-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  font-size: 22px;
  color: #2F2F2F;
  font-weight: 400;
  box-sizing: border-box;

  .icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    margin-right: 4px;
    cursor: pointer;

    .iconfont {
      font-size: 24px;
    }
  }

  .title {

  }
}
</style>
